<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-24
    	描述：后台系统首页
    -->
  <div class="home" v-loading="loading">
    <div class="common-form mt16">
      内容统计
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="home-top">
            <div class="content-title">文章</div>
            <div class="content-num">{{infoCount.infoCount}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-top">
            <div class="content-title">广告</div>
            <div class="content-num">{{infoCount.adCount}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-top">
            <div class="content-title">友情链接</div>
            <div class="content-num">{{infoCount.linkCount}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-top">
            <div class="content-title">栏目</div>
            <div class="content-num">{{infoCount.menuCount}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="common-form mt16">
      系统信息
    </div>
    <div class="">
      <el-row class="border-lt">
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">系统更新:</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">已是最新版</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">当前版本:</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.version}}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="border-lt">
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">网站名称：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.web_name}}</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">版权所有：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">正版软件</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="common-form mt16">
      服务器信息
    </div>
    <div class="">
      <el-row class="border-lt">
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">服务器系统:</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.os}}</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">网站域名/IP:</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.domain}} [ {{sysInfo.ip}} ]</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">服务器环境：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.web_server}}</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">PHP 版本：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.phpv}}</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">Mysql 版本：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.mysql_version}}</div>
            </el-col>
          </el-row>
        </el-col>
        <!--home-table -->
        <el-col :span="12" class="border-rb">
          <el-row>
            <el-col :span="8" class="border-r">
              <div class="home-table-name">GD 版本：</div>
            </el-col>
            <el-col :span="16">
              <div class="home-table-content">{{sysInfo.gdinfo}}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--home-table -->
      <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">文件上传限制：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.fileupload}}</div>
          </el-col>
        </el-row>
      </el-col>
      <!--home-table -->
      <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">最大占用内存：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.memory_limit}}</div>
          </el-col>
        </el-row>
      </el-col>
      <!--home-table -->
      <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">POST限制：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.postsize}}</div>
          </el-col>
        </el-row>
      </el-col>
      <!--home-table -->
      <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">最大执行时间：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.max_ex_time}}</div>
          </el-col>
        </el-row>
      </el-col>
      <!--home-table -->
      <!-- <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">Zip支持：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.zip}}</div>
          </el-col>
        </el-row>
      </el-col>
      home-table
      <el-col :span="12" class="border-rb">
        <el-row>
          <el-col :span="8" class="border-r">
            <div class="home-table-name">Zlib支持：</div>
          </el-col>
          <el-col :span="16">
            <div class="home-table-content">{{sysInfo.zlib}}</div>
          </el-col>
        </el-row>
      </el-col> -->
    </div>
  </div>
</template>

<script>
  import IndexApi from '@/api/index.js';
  export default {
    data() {
      return {
        loading: false,
        infoCount: {
          adCount: 0,
          infoCount: 0,
          linkCount: 0,
          menuCount: 0
        },
        sysInfo: {}
      };
    },
    created() {
      /*获取数据*/
      this.getData();
    },
    methods: {
      /*获取数据*/
      getData() {
        let self = this;
        IndexApi.getCount(true).then(data => {
          self.loading = false;
          self.infoCount = data.data.data.infoCount;
          self.sysInfo = data.data.data.sysInfo;
        }).catch(error => {

        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .home-table-name {
    background: #f9f9f9;
    padding-left: 20%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #454545;
  }

  .home-table-content {
    padding-left: 20%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #454545;
  }

  .border-lt {
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
  }

  .border-rb {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .border-r {
    border-right: 1px solid #eee;
  }

  .home-top {
    padding: 10px 15px;
    background-color: #73c5be;
    color: #999;
    border-radius: 2px;
    cursor: pointer;
  }

  .content-title {
    display: block;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
  }

  .content-num {
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: #ffffff;
  }

  .operation-wrap {
    width: 100%;
    height: 164px;
    border-radius: 8px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    background: #3a8ee6;
    background-size: 100% 100%;
    color: #fff;
  }

  .operation-wrap .grid-content {
    height: 164px;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .operation-wrap .grid-content h3 {
    font-size: 36px;
    line-height: 40px;
  }

  .operation-wrap .grid-content .info {
    margin-left: 10px;
  }

  .operation-wrap .grid-content .svg-icon {
    color: #FFFFFF;
  }

  .home-index {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-width: 1000px;
    overflow-x: auto;
  }

  .main-index {
    flex: 1;
  }

  .main-index .grid-content,
  .operation-wrap .grid-content {

    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .main-index .grid-content {
    height: 120px;
  }

  .main-index .grid-content .pic {
    margin-right: 10px;
  }

  .main-index .grid-content h3 {
    font-size: 20px;
    font-weight: normal;
  }

  .main-index .grid-content .yesterday {
    color: #ccc;
  }

  .main-index .grid-content .svg-icon {
    color: #3a8ee6;
  }

  .matters-wrap .matters {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 120px;
  }

  .matters-wrap .matters .title {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 40px;
    text-align: center;
    border-radius: 99px;
    margin-bottom: 20px;
    background: #3a8ee6;
  }

  .matters-wrap .matters ul {
    color: #999999;
  }

  .matters-wrap .matters ul span {
    padding-right: 6px;
    color: #3a8ee6;
  }
</style>
